<template>
    <view class="flex-c">
        <view class="record" v-for="(item ,index) in details" :key="index">
            <text class="name">{{item.hpv_name}}</text>
            <view class="flex-r">
                <text>接种人: </text>
                <text>{{item.name}}</text>
            </view>
            <view class="flex-r">
                <text>接种地点: </text>
                <text>{{item.address}}</text>
            </view>
            <view class="flex-r">
                <text>接种套餐: </text>
                <text>{{item.combo}}</text>
                <text>{{item.ino_time}}</text>
            </view>
            <view class="flex-r">
                <text>订单编号: </text>
                <text>{{item.order_number}}</text>
            </view>
            <view class="price">
                <text>￥{{item.price}}</text>
            </view>
            <view class="btn">
                <text :class="item.cancel ? ' ' : 'cancel'" @click="cancelOrder(item._id,index)">{{item.cancel?
                '点击取消'
                :'已取消预约'}}</text>
            </view>
        </view>
    </view>
    <view style="height:300rpx"></view>
    <point :show="show" />
</template>
<script setup lang="ts">
import point from '@/pages/common/point.vue'
import {
    onMounted,
    ref
} from 'vue'
import RequestApi from '@/public/request';
import { onShow } from '@dcloudio/uni-app';
import { hpvOrder } from '@/public/decl-type'
let details = ref<hpvOrder[]>([]);
let show = ref<boolean>(false)
async function cancelOrder(_id: string, index: number) {
    RequestApi.hpvorderCancel({ _id }).then(res => {
        details.value[index].cancel = false;
    }).catch(err => {
        console.log(err);
    })
}
onShow(async () => {
    const res: any = await RequestApi.hpvuser_order();
    details.value = res.data.data;
    if (details.value.length == 0) {
        show.value = true
    }
})
</script>

<style lang="scss">
page {
    background-color: #f6f6f6;
}

.record {
    margin-bottom: 10rpx;
}

.flex-c {
    display: flex;
    flex-direction: column;
    margin: 20rpx 20rpx 0 20rpx;
    background-color: #ffffff;
    border-radius: 20rpx;

    .name {
        display: block;
        margin: 0 30rpx;
        padding: 20rpx 0rpx;
        border-bottom: #e4e4e4 1rpx solid;
        font-size: 30rpx;
        font-weight: bolder;
    }

    .flex-r {
        display: flex;
        padding: 0rpx 15rpx;
        margin-top: 25rpx;
        font-size: 25rpx;

        text {
            margin-right: 10rpx;
        }

        text:nth-of-type(1) {
            margin-right: 8rpx;

        }
    }

    .btn {
        display: flex;
        justify-content: flex-end;

        text {
            display: block;
            margin: 20rpx;
            padding: 20rpx 40rpx;
            border: #0176ff 1px solid;
            border-radius: 15rpx;
            color: #0176ff;
        }

        .cancel {
            pointer-events: none;
            border: 1rpx solid #999aaa !important;
            color: #999aaa !important;
        }
    }
}

.price {
    display: flex;
    justify-content: flex-end;
    padding: 27rpx 15rpx 10rpx 0rpx;
    font-size: 25rpx;
    font-weight: bold;
}
</style>